<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单事件</title>
</head>
<body>
    <div class="box">

    </div>
    <form action="https://baidu.com" target="_blank">
        <div class="input-group">
            <label for="text">输入内容：</label>
            <input type="text" id="text">
        </div>
        <div class="input-group">
            <label for="fav">爱好</label>
            <input type="checkbox" id="fav">
        </div>
        <div class="input-group">
            <p id="ipt-content">input的内容</p>
        </div>
        <button>提交</button>
        <input type="reset">
    </form>
    <a href="https://163.com">网易</a>
    <script>
        var ipt = document.getElementById('text')
        let contentEle = document.getElementById('ipt-content')
        ipt.onfocus = function(){
            console.log('输入框获得焦点')
        }
        ipt.onblur = function(){
            console.log('输入框失去焦点')
        }
        //每当input元素输入内容就会触发input事件
        // ipt.oninput = function(){
        //     console.log(ipt.value)
        // }
        ipt.addEventListener('input',function(){
            let value = this.value
            contentEle.innerText = value

        })
        //当iput元素失去焦点，且里面的内容和上一次不一样才会触发change事件
        ipt.addEventListener('change',function(){
            console.log(ipt.value)
        })

        let favIpt = document.getElementById('fav')
        //当选项改变就会触发change事件
        favIpt.onchange = function(){
            console.log('选项改变了')
        }

        let formEle = document.querySelector('form')
        formEle.onreset = function(){
            console.log('表单充值了')
        }
        formEle.onsubmit = function(e){
            //阻止默认行为
            e.preventDefault()
            console.log('表单提价了')
        }

        let link = document.querySelector('a')
        link.onclick = function(e){
            console.log('点击了a标签')
            e.preventDefault()
        }
        window.onkeypress = function(e){
            console.log(e.key)
        }
    </script>
</body>
</html>